<template>
  <ul class="tree-ul">
    <li v-for="(item,index) in tree" :key="index">
      <div class="item" @mouseenter="hoverIndex = index" 
      
      
      @click="getSubTree(item,item.levelType)">
        <img src="./image/close-new.png" alt="" v-show="!item.show && item.levelType != 'camera'">
        <img src="./image/show-new.png" alt="" v-show="item.show && item.levelType != 'camera'">
        <!-- <img v-show="!item.children && item.show && item.levelType == 'camera'" src="./image/video_on.png" alt=""> -->
        <img v-show="!item.children && !item.show && item.levelType == 'camera'" src="./image/video-new.png" alt="">
        <!-- <img v-if="!item.children && item.status == 0" src="./image/video_error.png" alt=""> -->
        <span>{{item.nodeName}}</span>
      </div>
      <tree v-if="item.children" :tree="item.children" v-show="item.show" />
      <!-- <tree v-if="item.level == 1 && item.typeCompany" :tree="item.typeCompany"  />
      <tree v-if="item.level == 2 && item.directCompany" :tree="item.directCompany"  />
      <tree v-if="item.level == 3 && item.projectCompany" :tree="item.projectCompany"  /> -->
    </li>
    
  </ul>
</template>

<script>
import {getVideoSubTree } from '@/api/live/videonew'

export default {
  name:'tree',
  data() {
    return {
      dom:'',
      hoverIndex:-1,
      hoverIndex1:-1,
      show:false,
      routerName:''
    }
  },
  computed: {
    playids() {
      return this.$store.state.playids
    },
  },
  watch: {
    playids(val) {
    }
  },
  props:['tree','recommend'],
  mounted() {

  },
  methods: {
    // showEvent(item) {
    //   if(item.levelType != 'camera') {
    //     item.show = !item.show
    //   }
      
    // },
    // 查询子视频树
    getSubTree(item,type) {
      // 不是摄像头才调用接口
      if(item.levelType != 'camera') {
        if(item.levelType == 'rcmd') {
          if(!item.show) {
            // 判断有误子集，没有则调接口
            if(!item.children) {
              // getVideoRcmdTree({
              //   nodeId:item.nodeId,
              //   level:item.level
              // }).then(res => {
              //   item.children = res.data.body
              //   item.show = true
              //   this.$emit('clearFatherObj', this.tree)
              // })
            }else {
              item.show = !item.show
            }
            
          }else {
            item.show = false
          }
        }
        else {
          if(!item.show ) {
            if(!item.children) {
              getVideoSubTree({
                nodeId:item.nodeId,
                level:item.level
              }).then(res => {

                item.children = res.data.body
                item.show = true
                // this.tree = []
                // this.$emit('clearFatherObj', this.tree)
                // console.log(2)
              })
            }else {
              item.show = !item.show
            }
          }else {
            item.show = false
          }
        }
      }else{
        this.dragstartEvent(item)
        this.$emit('preview',item)
      }
      
    },
    dragstartEvent(item) {
      // item.show = false
      // console.log(item)
      this.$store.commit('setCameraId',item.nodeId)
      this.$store.commit('setItem',item)
      // this.$emit('haha', 'haha')
      // this.dom = e.currentTarget.cloneNode(true)
      // console.log(e.currentTarget)
      // console.log(item)
    },
    dragendEvent(item) {
       
      
      // console.log(item.cameraId)
      
      // console.log(e.currentTarget)
    }
  }
};
</script>

<style scoped lang="less" >
.tree-ul {
  li {
    cursor: pointer;
    padding-left:20px;
    font-size:16px;
    .item {
      min-height:32px;
      padding:5px 0;
      display:flex;
      align-items: center;
      box-sizing: border-box;
      border-radius: 4px;
      padding-left:5px;
      color:#4D4D4D;
      img {
        margin-right:10px;
      }
    }
    // .item:hover {
    //   background:#E1E8ED;
    //   color:#000;
    // }
  }
}
</style>
